import { breakpointsTailwind, createGlobalState, useBreakpoints, useDark, useStorage, useToggle } from '@na/utils'
import { GlobalThemeOverrides, darkTheme, enUS, lightTheme, useThemeVars, zhCN } from 'naive-ui'
import { computed, inject, onMounted, provide, ref, watch } from 'vue'
import settings from './settings.json'
// const viewTransitions = new ViewTransitions();
export function useIsMobile() {
  const breakpoints = useBreakpoints(breakpointsTailwind)
  const isMobile = breakpoints.smaller('md')
  return { isMobile }
}

export const useApp = createGlobalState(() => {
  const refresh = ref(false)
  const isDark = useDark()
  const { isMobile } = useIsMobile()
  const store = useStorage('app-setting-themes', {
    ...(settings as System.Settings),
  })
  const tokenTheme = computed(() => (store.value.theme === 'dark' ? darkTheme : lightTheme))
  const tokenLocale = computed(() => (store.value.locale === 'zhCN' ? zhCN : enUS))
  const switchTheme = useToggle(isDark)
  const toggleTheme = (theme: string) => {
    store.value.theme = theme === 'dark' ? 'light' : 'dark'
  }
  const toggleCollapsed = () => {
    store.value.collapsed = !store.value.collapsed
  }
  watch(
    () => store.value.theme,
    (value: string) => {
      switchTheme(value === 'dark')
    },
  )
  watch(
    () => store.value.mode,
    (value: string) => {
      store.value.asideCollapseWidth = value === 'horizontal' ? 80 : 0
    },
  )
  const commonMenuIndex = ref(1)
  const commonMenus = ref([
    { title: '系统', icon: 'local:home', id: 1 },
    { title: '设置', icon: 'local:setting', id: 2 },
    { title: '应用', icon: 'local:apps', id: 3 },
    { title: '应用', icon: 'local:close', id: 4 },
    { title: '应用', icon: 'local:clock', id: 5 },
    { title: '应用', icon: 'local:question', id: 6 },
    { title: '应用', icon: 'local:location', id: 7 },
    { title: '应用', icon: 'local:camera', id: 8 },
    { title: '应用', icon: 'local:edit', id: 9 },
  ])

  const appStore = {
    store,
    isDark,
    isMobile,
    tokenTheme,
    tokenLocale,
    toggleTheme,
    toggleCollapsed,
    switchTheme,
    commonMenus,
    commonMenuIndex,
    refresh,
  }
  provide('AppStore', appStore)
  return appStore
})
